<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花瓣网_陪你做生活的设计师</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<!--主体内容-->
<div>
    <!--顶部导航栏导航栏-->
    <nav id="nav">
        <div class="nav-center">
            <div class="nav-left">
                <h1><a href="javascript:"></a></h1>
                <ul class="navList">
                    <li><a href="javascript:">首页</a></li>
                    <li><a href="javascript:">发现</a></li>
                    <li><a href="javascript:">最新</a></li>
                    <li>
                        <a href="javascript:" class="dot"></a>
                        <span class="cut-off"></span>
                    </li>
                    <li><a href="javascript:">活动</a></li>
                    <li><a href="javascript:">图库<span class="new"></span></a></li>
                    <li><a href="javascript:">设计服务</a></li>
                    <li><a href="javascript:">课程</a></li>
                    <li><a href="javascript:">美物</a></li>
                </ul>
            </div>
            <form class="nav-search">
                <div class="nav-search-select">
                    采集
                    <span class="nav-search-select-icon"></span>
                </div>
                <input type="text" placeholder="搜索你喜欢的">
                <span class="search-icon"></span>
            </form>
            <div class="nav-right">
                <a id="login_btn" href="javascript:">登录</a>
                <a id="sign_in_btn" href="javascript:">注册</a>
            </div>
        </div>
    </nav>

    <!--头部-->
    <header id="header_main">
        <!--背景蒙版效果-->
        <div class="header-bgo"></div>
        <!--标题+搜索框-->
        <section class="header-search">
            <p>花瓣，陪你做生活的设计师</p>
            <form>
                <input type="text" placeholder="搜索你喜欢的">
                <span class="search-icon"></span>
            </form>
            <p>热门搜索：
                <a href="javascript:">创意合成</a>，
                <a href="javascript:">动漫场景</a>，
                <a href="javascript:">科技背景</a>，
                <a href="javascript:">世界杯</a>，
                <a href="javascript:">壁纸那些事</a>
            </p>
            <p>图片：<a href="javascript:">叉烧君</a></p>
        </section>
        <!--小广告切换-->
        <section id="banner" class="banner">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li><a href="javascript:"></a></li>
            </ul>
            <span id="banner_cancel_button" class="banner-cancel"></span>
        </section>
    </header>

    <!--正文内容-->
    <div id="content">
        <!--大家正在关注-->
        <section class="onfocus">
            <div class="cut-line">大家正在关注</div>
            <div class="onfocus-content">
                <ul>
                    <li><a href="javascript:"><img src="images/focus01.jpeg"></a></li>
                    <li><a href="javascript:"><img src="images/focus02.jpeg"></a></li>
                    <li><a href="javascript:"><img src="images/focus03.jpeg"></a></li>
                    <li><a href="javascript:"><img src="images/focus04.png"></a></li>
                    <li><a href="javascript:"><img src="images/focus05.jpeg"></a></li>
                </ul>
            </div>
        </section>

        <!--为您推荐-->
        <section class="recommend">
            <div class="cut-line">为您推荐</div>
            <div id="recommend_list" class="recommend-content">
                <ul>

                </ul>
            </div>
            <!--点击加载更多-->
            <div class="more">
                <a id="btn_more" href="javascript:">加载更多</a>
            </div>
        </section>
    </div>
</div>

<!--尾部-->
<div class="classes">
    <div class="classes-title">
        <p>以分类浏览花瓣</p>
        <a href="javascript:">所有采集 »</a>
    </div>
    <div class="classes-content">
        <ul>
            <li><a href="javascript:">UI/UX</a></li>
            <li><a href="javascript:">平面</a></li>
            <li><a href="javascript:">插画/漫画</a></li>
            <li><a href="javascript:">家居/家装</a></li>
            <li><a href="javascript:">女装/搭配</a></li>
            <li><a href="javascript:">男士/风尚</a></li>
            <li><a href="javascript:">婚礼</a></li>
        </ul>
        <ul>
            <li><a href="javascript:">工业设计</a></li>
            <li><a href="javascript:">摄影</a></li>
            <li><a href="javascript:">造型/美妆</a></li>
            <li><a href="javascript:">美食</a></li>
            <li><a href="javascript:">旅行</a></li>
            <li><a href="javascript:">手工/布艺</a>
            <li>
            <li><a href="javascript:">健身/舞蹈</a></li>
        </ul>
        <ul>
            <li><a href="javascript:">儿童</a></li>
            <li><a href="javascript:">宠物</a></li>
            <li><a href="javascript:">美图</a></li>
            <li><a href="javascript:">明星</a></li>
            <li><a href="javascript:">美女</a></li>
            <li><a href="javascript:">礼物</a></li>
            <li><a href="javascript:">极客</a></li>
        </ul>
        <ul>
            <li><a href="javascript:">动漫</a></li>
            <li><a href="javascript:">建筑设计</a></li>
            <li><a href="javascript:">人文艺术</a></li>
            <li><a href="javascript:">数据图</a></li>
            <li><a href="javascript:">游戏</a></li>
            <li><a href="javascript:">汽车/摩托</a></li>
            <li><a href="javascript:">电影/图书</a></li>
        </ul>
        <ul>
            <li><a href="javascript:">生活百科</a></li>
            <li><a href="javascript:">教育</a></li>
            <li><a href="javascript:">运动</a></li>
            <li><a href="javascript:">搞笑</a></li>
        </ul>
    </div>
</div>

<!--页脚-->
<footer>
    <div class="wrapper">
        <div class="column">
            <a href="javascript:">花瓣首页</a>
            <a href="javascript:">花瓣采集工具</a>
            <a href="javascript:">花瓣官方博客</a>
            <a href="javascript:">违规有害信息举报</a>
        </div>
        <div class="column">
            <a>联系与合作</a>
            <a href="javascript:">联系我们</a>
            <a href="javascript:">用户反馈</a>
            <a href="javascript:">花瓣 LOGO 标准文档</a>
        </div>
        <div class="column">
            <a>移动客户端</a>
            <a href="javascript:">花瓣 iPhone 版</a>
            <a href="javascript:">花瓣 Android 版</a>
            <a href="javascript:">花瓣 HD</a>
        </div>
        <div class="follow-us">
            <a>关注我们</a>
            <a href="javascript:">新浪微博：@练习网</a>
            <a href="javascript:">联系客服：在线客服</a>
            <a>官方微信：
                <img src="images/about_footer_code.png">
                <img src="images/weixin_huaban.png">
            </a>
        </div>
    </div>
    <div class="beian">&copy; Huaban 练习练习网络有限公司 |
        <a href="javascript:">练习网安备 00000000000000号</a></div>
</footer>

<!--右边浮动-->
<div id="elevator_item">
    <span class="elevator"></span>
    <span class="help"></span>
    <span class="plus"></span>
    <div class="help-popup">
        <ul>
            <li><a href="javascript:"><i></i>帮助中心</a></li>
            <li><a href="javascript:"><i></i>用户反馈</a></li>
            <li><a href="javascript:"><i></i>人工服务</a></li>
        </ul>
        <b></b>
    </div>
    <div class="plus-popup">
        <ul>
            <li><a href="javascript:"><i></i>添加采集</a></li>
            <li><a href="javascript:"><i></i>添加画板</a></li>
            <li><a href="javascript:"><i></i>添加采集工具</a></li>
        </ul>
        <b></b>
    </div>
</div>

<!--登录面板-->
<div id="login_box" class="login-box">
    <!--蒙版-->
    <div id="mask" class="mask-box"></div>
    <!--登录框-->
    <div id="login_b" class="login-box-common login-b">
        <span class="cancel-btn"></span>
        <img src="images/logo_2x.png">
        <div class="cut-line">使用第三方帐号登录</div>
        <div class="login-pic pic-box">
            <a class="weibo" href="javascript:"></a>
            <a class="qzone" href="javascript:"></a>
            <a class="wechat" href="javascript:"></a>
            <a class="douban" href="javascript:"></a>
            <a class="renren" href="javascript:"></a>
        </div>
        <div class="cut-line">使用手机号/邮箱登录</div>
        <form>
            <input type="text" placeholder="输入手机号或者邮箱">
            <input type="password" placeholder="密码">
            <a class="login-btn" href="javascript:">登录</a>
        </form>
        <p><a href="javascript:">忘记密码»</a>还没有花瓣帐号？<a id="to_signin" href="javascript:">点击注册»</a></p>
    </div>

    <!--注册框-->
    <div id="sign_in_b" class="login-box-common sign-in-b">
        <span class="cancel-btn"></span>
        <img src="images/logo_2x.png">
        <div id="sign_in_account" class="sign-in-account">
            <div class="cut-line">使用第三方帐号注册花瓣</div>
            <div class="sign-in-pic pic-box">
                <a class="weibo" href="javascript:"></a>
                <a class="qzone" href="javascript:"></a>
                <a class="wechat" href="javascript:"></a>
                <a class="douban" href="javascript:"></a>
            </div>
            <a id="sign_in_to_phone" class="word" href="javascript:">使用手机号注册</a>
            <p><a id="to_login" href="javascript:">登录到花瓣</a>已有帐号？</p>
        </div>
        <div id="sign_in_phone" class="sign-in-phone">
            <div class="cut-line">使用手机号注册</div>
            <form>
                <input type="text" placeholder="输入手机号">
                <div class="yanzheng"></div>
                <a class="login-btn" href="javascript:">注册</a>
            </form>
            <p><a id="sign_in_to_account" href="javascript:">« 返回第三方帐号登录</a></p>
        </div>
    </div>
</div>

<script src="js/function.js"></script>
<script src="js/index.js"></script>
</body>
</html>